<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-09 10:07:06
 * @LastEditTime: 2019-10-17 14:12:39
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="register">
    <div class="header">
      <img src="../assets/histry.png" @click="histry">
      <span class="reg">注册</span>
      <span class="log" @click="log">登录</span>
    </div>
    <div class="from">
      <input
        type="text"
        class="input"
        v-model="phone"
        placeholder="请输入手机号"
        pattern="^(?:(?:\+|00)86)?1\d{10}$"
        required
        @keyup="keyu"
        @blur="blu"
        @focus="focu"
      >
      <div
        class="rega animated bounceInRight"
        v-if="registered"
        style="color:red;font-size:0.08rem;"
      >此账号已注册</div>
      <div
        class="rega animated bounceInRight"
        v-if="plregistered"
        style="color:#e6a23c;font-size:0.08rem;"
      >请填写正确的手机号格式</div>
      <div
        class="rega animated bounceInRight"
        v-if="unregistered"
        style="color:green;font-size:0.08rem;"
      >放心注册</div>
      <input type="text" class="input" v-model="codea" placeholder="请输入验证码" required @keyup="keyu">
      <div class="code" v-show="show" @click="code">获取验证码</div>
      <div class="code" v-show="!show">{{sj}}s</div>
      <input
        type="password"
        class="input"
        v-model="password"
        placeholder="请输入密码(最少6位)"
        required
        @keyup="keyu"
        @focus="focu_2"
        @blur="blu_2"
      >
      <div
        class="regb animated bounceInRight"
        v-if="pwd_2"
        style="color:#e6a23c;font-size:0.08rem;"
      >请输入数字与字母或特殊字符的6-20位密码</div>
      <div
        class="regb animated bounceInRight"
        v-if="pwd_2_ok"
        style="color:green;font-size:0.08rem;"
      >密码格式正确</div>
      <input
        type="password"
        class="input"
        v-model="password_2"
        placeholder="请输确认密码"
        required
        @keyup="keyu"
        @focus="focu_3"
        @blur="blu_3"
      >
      <div
        class="regc animated bounceInRight"
        v-if="pwd_3"
        style="color:#e6a23c;font-size:0.08rem;"
      >请重复上述密码</div>
      <div class="login_a" v-if="checked_no" style="background:#a9a9a9;">立即注册</div>
      <div class="login_a" v-if="!checked_no" @click="reg">立即注册</div>
    </div>
    <div class="footer">
      <span style="color:#bebebe;">登录即代表您已同意</span>
      <router-link style="color:#409eff;" to="/privacy">《报表隐私政策》</router-link>
    </div>
  </div>
</template>

<script>
import { sms, register, register_judge } from "../api/api.js";
export default {
  name: "register",
  data() {
    return {
      phone: "",
      sj: "",
      show: true,
      timer: null,
      show: true,
      codea: "",
      password: "",
      password_2: "",
      checked_no: true,
      registered: false,
      unregistered: false,
      plregistered: false,
      pwd_2: false,
      pwd_2_ok: false,
      pwd_3: false,
      pwd_3_ok: false
    };
  },
  mounted() {},
  watch: {},
  methods: {
    //   倒计时
    dao() {
      this.show = false;
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.sj = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.sj > 0 && this.sj <= TIME_COUNT) {
            this.sj--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 验证码接口
    sms_a(){
      sms({
        data:{mobile:this.phone}
      }).then(res=>{
        console.log(res)
        if(res.data.code==10000){
          this.$toast("今日以超过最大值");
        }else if(res.data.code==10001){
          this.$toast('短信发送成功')
          this.dao();
        }else if(res.data.code==10002){
          this.$toast('短信发送失败')
        }
      })
    },
    // 注册接口
    register_a() {
      this.$loading.open();
      register({
        data: {
          mobile: this.phone,
          sms: this.codea,
          pwd: this.password
        }
      }).then(res => {
        this.$loading.close();
        if (res.data.code == 10006) {
          this.$toast("注册成功");
          this.$router.push("/");
        } else if (res.data.code == 10007) {
          this.$toast("注册失败");
        } else if (res.data.code == 10003) {
          this.$toast("验证码为空");
        } else if (res.data.code == 10005) {
          this.$toast("验证码错误");
        }
        console.log(res);
      });
    },
    //   获取验证码
    code() {
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        alert("手机号码有误，请重填");
      } else {
        
        this.sms_a()
      }
    },
    // 返回上一层
    histry() {
      this.$router.push("/");
    },
    // 登录
    log() {
      this.$router.push("/");
    },
    // 红色的按钮
    red_btn() {
      if (
        /^1[3456789]\d{9}$/.test(this.phone) &&
        this.codea.length == 4 &&
        this.password.length >= 6 &&
        this.password == this.password_2
      ) {
        this.checked_no = false;
      } else {
        this.checked_no = true;
      }
    },

    keyu() {
      this.red_btn();
    },
    //注册
    reg() {
      this.register_a();
    },
    // 聚焦
    focu() {
      this.plregistered = false;
      this.registered = false;
      this.unregistered = false;
    },
    // 判断是否注册过
    blu() {
      if (/^1[3456789]\d{9}$/.test(this.phone)) {
        register_judge({
          data: {
            mobile: this.phone
          }
        }).then(res => {
          if (res.data.code == 10008) {
            this.unregistered = true;
            this.registered = false;
          } else if (res.data.code == 10009) {
            this.unregistered = false;
            this.registered = true;
          }else if(res.data.code==44444){
            this.$toast('程序内部错误')
          }
        });
      } else if (this.phone != "") {
        this.plregistered = true;
      }
    },
    // 密码1失焦
    blu_2() {
      if (this.password != "") {
        if (
          !/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(this.password)
        ) {
          this.pwd_2 = true;
          this.pwd_2_ok = false;
        } else {
          this.pwd_2 = false;
          this.pwd_2_ok = true;
        }
      }
    },
    // 密码1聚焦
    focu_2() {
      this.pwd_2 = false;
      this.pwd_2_ok = false;
    },
    // 密码2聚焦
    focu_3() {
      this.pwd_3 = false;
      this.pwd_3_ok = false;
    },
    blu_3() {
      if (this.password_2 != "") {
        if (this.password == password_2) {
          this.pwd_3 = false;
          this.pwd_3_ok = true;
        } else if(this.password != password_2){
          this.pwd_3 = true;
          this.pwd_3_ok = false;
        }
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.register {
  height: 100vh;
  width: 100%;
  background: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.5rem;
    line-height: 0.5rem;
    padding: 0 0.1rem;
    img {
          height: 0.16rem;
          width: 0.08rem;
          margin-right:0.08rem;
        }
    .reg {
      font-size: 0.18rem;
      color: #333;
      font-weight: bold;
    }
    .log {
      font-size: 0.14rem;
      color: #888;
      font-weight: bold;
    }
  }
  .from {
    width: 3.46rem;
    padding-top: 0.2rem;
    margin: 0 auto;
    position: relative;
    .input {
      outline: none;
      border: none;
      width: 3.32rem;
      height: 0.51rem;
      transition: all 300ms;
      background-color: transparent;
      border-bottom: 0.01rem solid #eee;
      padding-left: 0.1rem;
    }
    .login_a {
      height: 0.47rem;
      width: 100%;
      background: -webkit-linear-gradient(left, #E82716, #FC6565);
    background: -o-linear-gradient(right, #E82716, #FC6565);
    background: -moz-linear-gradient(right, #E82716, #FC6565);
    background: linear-gradient(to right, #E82716, #FC6565);
      border-radius: 0.04rem;
      font-size: 0.16rem;
      color: #fff;
      line-height: 0.47rem;
      text-align: center;
      margin-top: 0.29rem;
    }
    .code {
      position: absolute;
      right: 0.2rem;
      top: 0.95rem;
    }
    .rega {
      position: absolute;
      right: 0.2rem;
      top: 0.4rem;
    }
    .regb {
      position: absolute;
      right: 0.2rem;
      top: 1.5rem;
    }
    .regc {
      position: absolute;
      right: 0.2rem;
      top: 2rem;
    }
  }
  .footer {
    margin-top: 2.48rem;
    text-align: center;
    padding-bottom: 0.2rem;
  }
}
</style>
